{% extends "base.html" %}
{% load static %}

{% block title %}GodJin · 数据分析{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/analysis.css' %}">
{% endblock %}

{% block content %}

<!-- Hero，与站内风格统一 -->
<section class="hero text-white text-center"
         style="background: url('{% static "picture/version.jpg" %}') center/cover no-repeat;">
  <div class="container py-5">
    <h1 class="display-5 fw-bold mb-2">数据分析</h1>
    <p class="lead mb-0">先从 CS2 饰品开始，逐步扩展到更多品类</p>
  </div>
</section>

<section class="section">
  <div class="container">

    <!-- 分类 Tabs（只有 CS2 可用） -->
    <ul class="nav nav-pills mb-4 gap-2 flex-wrap">
      <li class="nav-item"><button class="nav-link active" data-target="panel-cs2">CS2 饰品</button></li>
      <li class="nav-item"><button class="nav-link disabled" title="敬请期待">手游道具</button></li>
      <li class="nav-item"><button class="nav-link disabled" title="敬请期待">电商比价</button></li>
      <li class="nav-item"><button class="nav-link disabled" title="敬请期待">礼品卡</button></li>
    </ul>

    <!-- CS2 面板 -->
    <div id="panel-cs2" class="panel card border-0 shadow-sm">
      <div class="card-body p-4 p-md-5">

        <!-- 筛选表单 -->
        <form id="csForm" class="row g-3 align-items-end"
              data-api="/api/analysis/cs2/">  {# 你的后端接口：GET 接收查询参数 #}

          <div class="col-12 col-md-4">
            <label class="form-label">物品名（支持模糊）</label>
            <input type="text" name="q" class="form-control" placeholder="例：Glock-18 | Neo-Noir">
          </div>

          <div class="col-6 col-md-2">
            <label class="form-label">外观</label>
            <select name="exterior" class="form-select">
              <option value="">全部</option>
              <option>Factory New</option>
              <option>Minimal Wear</option>
              <option>Field-Tested</option>
              <option>Well-Worn</option>
              <option>Battle-Scarred</option>
            </select>
          </div>

          <div class="col-6 col-md-2">
            <label class="form-label">Float 最小</label>
            <input type="number" step="0.0001" name="fmin" class="form-control" placeholder="0.00">
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label">Float 最大</label>
            <input type="number" step="0.0001" name="fmax" class="form-control" placeholder="1.00">
          </div>

          <div class="col-6 col-md-2">
            <label class="form-label">价格 ≥</label>
            <input type="number" step="0.01" name="pmin" class="form-control" placeholder="￥">
          </div>
          <div class="col-6 col-md-2">
            <label class="form-label">价格 ≤</label>
            <input type="number" step="0.01" name="pmax" class="form-control" placeholder="￥">
          </div>

          <div class="col-12">
            <label class="form-label d-block mb-1">平台</label>
            <div class="d-flex flex-wrap gap-2">
              <label class="form-check me-3"><input class="form-check-input" type="checkbox" name="pf" value="steam" checked> Steam</label>
              <label class="form-check me-3"><input class="form-check-input" type="checkbox" name="pf" value="buff" checked> Buff</label>
              <label class="form-check me-3"><input class="form-check-input" type="checkbox" name="pf" value="c5"> C5Game</label>
              <label class="form-check me-3"><input class="form-check-input" type="checkbox" name="pf" value="skinport"> SkinPort</label>
              <label class="form-check me-3"><input class="form-check-input" type="checkbox" name="pf" value="haloskins"> HaloSkins</label>
            </div>
          </div>

          <div class="col-6 col-md-3">
            <label class="form-label">时间窗口</label>
            <select name="window" class="form-select">
              <option value="24h">近 24 小时</option>
              <option value="3d">近 3 天</option>
              <option value="7d" selected>近 7 天</option>
              <option value="30d">近 30 天</option>
            </select>
          </div>

          <div class="col-6 col-md-3">
            <label class="form-label">排序</label>
            <select name="sort" class="form-select">
              <option value="spread_desc">价差 ↓</option>
              <option value="spread_asc">价差 ↑</option>
              <option value="price_desc">价格 ↓</option>
              <option value="volume_desc">成交量 ↓</option>
              <option value="updated_desc">更新时间 ↓</option>
            </select>
          </div>

          <div class="col-12 col-md-auto ms-auto">
            <button type="submit" class="btn btn-primary btn-lg shadow-sm">开始分析</button>
            <button type="reset" class="btn btn-outline-secondary btn-lg">清空</button>
          </div>
        </form>

        <!-- 指标卡片 -->
        <div id="kpiRow" class="kpi-grid mt-4">
          <div class="kpi card border-0 shadow-sm">
            <div class="card-body">
              <div class="kpi-title">覆盖平台数</div>
              <div class="kpi-value" id="kpiPlatforms">—</div>
            </div>
          </div>
          <div class="kpi card border-0 shadow-sm">
            <div class="card-body">
              <div class="kpi-title">分析物品数</div>
              <div class="kpi-value" id="kpiItems">—</div>
            </div>
          </div>
          <div class="kpi card border-0 shadow-sm">
            <div class="card-body">
              <div class="kpi-title">平均可套利价差</div>
              <div class="kpi-value" id="kpiAvgSpread">—</div>
            </div>
          </div>
          <div class="kpi card border-0 shadow-sm">
            <div class="card-body">
              <div class="kpi-title">最佳机会</div>
              <div class="kpi-value" id="kpiBest">—</div>
            </div>
          </div>
        </div>

        <!-- 结果表 -->
        <div class="table-responsive mt-4">
          <table class="table align-middle table-hover">
            <thead class="table-light sticky-thead">
              <tr>
                <th>物品</th>
                <th>外观</th>
                <th>平台</th>
                <th class="text-end">价格</th>
                <th class="text-end">相对 Steam 价差</th>
                <th class="text-end">成交量(窗内)</th>
                <th>更新时间</th>
              </tr>
            </thead>
            <tbody id="resultBody">
              <tr class="text-muted">
                <td colspan="7">提交筛选条件后将显示结果</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

  </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
  // 给外部 JS 一点配置；没有后端时可切换为 true 使用前端 Demo 数据
  window.ANALYSIS_DEMO = false;  // 没有接口时改成 true
</script>
<script src="{% static 'js/analysis.js' %}"></script>
{% endblock %}